<template>
    <div class="container">
        <div class="right-block">
            <div class="latest-news">
                <p class="latest-title">最近文章</p>
                <ul class="news-wrapper">
                    <li v-for="news in newsList"><router-link :to="{path:'/news-content',query:{q:news.id}}" class="ellipsis">{{news.name}}</router-link></li>
                </ul>
            </div>
        </div>
        <div class="left-block">
            <div class="news">
                <div class="news-title">{{news.name}}</div>
                <div class="news-message">
                    <span>作者：{{news.author}}</span>
                    <i>&nbsp;|&nbsp;</i>
                    <span>{{news.inTimes}}</span>
                    <i>&nbsp;|&nbsp;</i>
                    <span>浏览次：{{news.browse_number}}</span>
                </div>
                <div class="content" v-html="news.content"></div>
            </div>
        </div>
    </div>
</template>
<script type="text/javascript">
    export default{
        data(){
            return{
                newsList:[],
                news:{}
            }
        },
        mounted(){
            this.initNews();
            this.initLatestNews();
        },
        watch:{
            $route(){
                this.initNews();
            }
        },
        methods:{
            initLatestNews(){
                this.$http.get('/news/list',{
                    params: {
                        include:'category'
                    }
                }).then(response => {
                    var data = response.data;
                    this.newsList = data.data;
                }).catch(err => {

                })
            },
            initNews(){
                this.$http.get('/news/' + this.$route.query.q).then(ret => {
                    this.news = ret.data.data;
                }).catch(err =>{

                })
            }
        }
    }
</script>
<style type="text/css" scoped>
    .container{ width:1200px; margin:0 auto; }
    .right-block{ width:368px;float:right; padding-left:10px; border-left:1px solid #999;}
    .latest-news{ line-height:2; padding:0 10px;}
    .latest-title{ font-weight:bold; font-size:16px;}
    .news-wrapper li a{ display:block;}
    .news-wrapper li a:hover{ color:#15ccac; text-decoration:underline;}
    .left-block{ margin-right:400px;}
    .news{ margin-top:25px;}
    .news-title{ text-align:center; font-size:18px; line-height:2;}
    .news-message{ text-align:center; color:#999; font-size:12px; line-height:22px;}
    .content{ line-height:28px; text-indent:28px; margin:20px 0 40px;}
</style>